<template>
    <div class="other">
        <div class="mask" ref="maskBox">
            <div class="other-box" ref="otherBox">
            <div class="header">
                <Dropdown>
                    <div class="prj-choice">
                        项目名称：{{mock.prj_name || ''}}   施工企业：{{mock.crop_name || ''}}
                        <Icon type="ios-arrow-down"></Icon>
                    </div>
                    <DropdownMenu slot="list">
                        <DropdownItem>
                            <div v-for="(item, i) in mock.switch_prj || []" :key="i" @click="choicePrj(item)">{{item.prj_name || ''}}</div>
                        </DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </div>
            <i-row class="contents">
                <i-col :span="8">
                    <div class="attendance">
                        <div class="tis">考勤比例</div>
                        <div class="attendance-total">
                            <span class="attendance-item">工人总数： {{ mock.attend && mock.attend.worker_num || 0}}</span>
                            <span class="attendance-item">考勤数： {{mock.attend && mock.attend.attend_num || 0}}</span>
                        </div>
                        <i-circle :percent="mock.attend && mock.attend.rate * 100 || 0" :size="size">
                            <span class="demo-Circle-inner" style="font-size:36px">{{mock.attend && mock.attend.rate * 100 || 0}}%</span>
                        </i-circle>
                    </div>
                    <div class="sex">
                        <div class="tis">男女比例</div>   
                        <div class="show-types">
                            <span>男：{{mock.personnel && mock.personnel.boy_num || 0}}人</span><span>女：{{mock.personnel && mock.personnel.girl_num || 0}}人</span>
                        </div>
                        <ve-pie :data="chartData" width="100%" :legend-visible="false"  :settings="chartSettings"></ve-pie>
                    </div>
                </i-col>
                <i-col :span="16" class="user">
                    <div class="work-charts">
                        <div class="tis">工种统计</div>
                        <ve-histogram :data="workderData" width="100%" :settings="settings" :extend="extendss" :legend-visible="false" height="340px"></ve-histogram>
                    </div>
                    <div class="tables">
                        <div class="tis">
                            进出场人员详情
                            <div style="float:right;font-weight: 400;">
                            <span>进场人数： {{mock.entry_num || 0}}</span><span>现场人数： {{mock.presence_num || 0}}</span><span>离场人数： {{mock.exit_num || 0}}</span>
                            </div>
                        </div>
                        <div class="thead">
                            <span class="th" v-for="(item, i) in tableTitle" :key="i">{{item}}</span>
                        </div>
                        <div class="tbody" ref="userList">
                            <div class="tr" v-for="(item, i) in userList" :key="i">
                                <span class="td">{{item.name}}</span>
                                <span class="td">{{item.sex == 1 ? '男' : '女'}}</span>
                                <span class="td">{{item.age}}</span>
                                <span class="td">{{item.work_name}}</span>
                                <span class="td">{{item.entry_time}}</span>
                                <span class="td">{{item.exit_time}}</span>
                            </div>
                        </div>
                    </div>
                </i-col>
            </i-row>
            <div class="footer">
                {{titles}} {{times}}
            </div>
            </div>
        </div>
    </div>
</template>
<script>
import {VePie, VeHistogram} from 'v-charts'
import {getProjectDetail} from '@/js/api'
export default {
    name: 'other',
    components: {
        vePie:VePie,
        VeHistogram
    },
    data () {
        this.settings = {
            itemStyle: {
                color: '#3CA0FF',
                fontSize: 20,
                
            },
            label: {
                show: true,		//开启显示
                position: 'top',	//在上方显示
                textStyle: {	    //数值样式
                    color: '#fff',
                    fontSize: 20
                }
            },
        }
        this.extendss = {
            barWidth: 30,
            yAxis: {
                    minInterval: 1,
                    color: '#fff'
                },
            xAxis: {
                axisLine: {
                    lineStyle: {
                        color: '#fff', // 颜色
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff', 
                        fontSize : 20      
                    }
                }
            }
        }   
        this.chartSettings = {
            dimension: '性别',
            metrics: '人数',
            itemStyle: {
                color:function (params) {
                    let colorList = ['#3CA0FF', '#f00']
                    return colorList[params.dataIndex]
                }
            },
            label: {
                show: true,		//开启显示
                textStyle: {	    //数值样式
                    color: '#fff',
                    fontSize: 20
                }
            },
        }
        return {
            size: 260,
            detailTimer: null,
            sysTimer: null,
            animationTimer: null,
            titles: '亚雀实名制灵活用工人脸识别管理系统',
            tableTitle: ['姓名', '性别', '年龄', '工种', '进场时间', '出场时间'],
            title: '清溪区五里桥安置小区，施工企业：中铁十一局',
            times: '',
            screentime: null,
            userList:[], // [{name:1},{name:2},{name:3},{name:4},{name:5},{name:6},{name:7}, {name:8}, {name: 9}],
            mock: {
                // "prj_no": 4696612707267248128,  //项目编号
                // "prj_name": "18912341002项目", //项目名称
                // "crop_name": "XXX公司",       //企业名称
                "switch_prj": [{             //切换项目
                    "prj_no": 4696612707267248128, //项目编号
                    "prj_name": "18912341002项目"//项目名称
                }],
                // "attend": {              //考勤比例
                //     "worker_num": 50,       //工人数
                //     "attend_num": 30,      //考勤数
                //     "rate": 0.6         //百分比
                // },
                // "personnel": {          //男女人数
                //     "boy_num": 30,       //男生人数
                //     "girl_num": 20,      //女生人数
                //     "rate": 0.6        //男女比例
                // },
                // "work": [{           //工种比例
                //     "name": " 砌筑工",   //工种名称
                //     "num": 40,         //工种人数
                //     "rate": 0.8      //工种比例
                // }],
                // "entry_exit": [{    //进出场人员详情
                //     "name": "张三",    //姓名
                //     "sex": 1,         //性别
                //     "age": 35,         //年龄
                //     "work_name": '木工',   //工种
                //     "entry_time": "08:00",  //进场时间
                //     "exit_time": "18:00" //出场时间
                // }],
                // "presence_num": 0,
                // "entry_num": 0,
                // "exit_num": 0,
            },
            prj_no: ''
        }
    },
    computed: {
        chartData () {
            let columns = ['性别', '人数']
            const {mock: {personnel}} = this
            let boy_num = personnel && personnel.boy_num || 0
            let girl_num = personnel && personnel.girl_num || 0
            return {
                columns,
                rows: [
                    { '性别': `男：${boy_num || 0}人`, '人数': boy_num || 0 },
                    { '性别': `女：${girl_num || 0}人`, '人数': girl_num || 0 }
                ]
            }
        },
        workderData () {
            const {mock: {work}} = this
            let columns =  ['工种', '数量']
            let rows = []
            if (work && work.length) {
                rows = work.map(r => {
                    return {
                        '工种': r.name || '',
                        '数量': r.num || 0
                    }
                }) || []
            }
            return {
                columns,
                rows
            }
        }
    },
    mounted () {
        this.clock()
        clearInterval(this.detailTimer)
        this.detailTimer = null
        this.getDetail(this.prj_no)
        this.screen()
        this.detailTimer = setInterval(() => {
            this.getDetail(this.prj_no)
        }, 30000)
    },
    methods: {
        screen () {
           this.screentime =  setInterval(() => {
                   let width = document.documentElement.clientWidth
                   let height = document.body.clientHeight
                   let baiseWidth = 1920
                   if (width < 1276) {
                       width = 1276
                   }
                   let spit = width/baiseWidth
                   let spitY = height / 1080
                   let current = spit < spitY ? spit : spitY
                   this.$refs.otherBox.style.transform = `scale(${current},${current})`
                   let m = 0
                   m = parseInt((width - (baiseWidth* current))/2)
                   this.$refs.maskBox.style.margin = `0 ${m}px`
            }, 500)
        },
        // 选择项目
        choicePrj (item) {
            const {prj_no} = item
            this.prj_no = prj_no
            clearInterval(this.detailTimer)
            this.detailTimer = null
            this.getDetail(prj_no)
            this.detailTimer = setInterval(() => {
                this.getDetail(prj_no)
            }, 30000)
        },
        clock () {
            this.sysTimer = setInterval(() => {
                let times = new Date()
                let year,mon,day,hour,min,second
                year = times.getFullYear()
                mon = times.getMonth()+1 < 10 ? `0${times.getMonth()+1}`: times.getMonth()+1
                day = times.getDate() < 10 ? `0${times.getDate()}`: times.getDate()
                hour = times.getHours() < 10 ? `0${times.getHours()}`: times.getHours()
                min = times.getMinutes() < 10 ? `0${times.getMinutes()}`: times.getMinutes()
                second = times.getSeconds() < 10 ? `0${times.getSeconds()}`: times.getSeconds()
                this.times = `${year}年${mon}月${day}日 ${hour}时${min}分${second}秒`
            }, 1000)
        },
        animation () {
             let step = 0
             this.animationTimer = setInterval(() =>{
                 step--
                 this.$refs.userList.style.top = `${step}px`
                 if (step <= -60) {
                     this.userList.push(this.userList[0])
                     this.userList.shift()
                     clearInterval(this.animationTimer)
                     this.animationTimer = null
                     this.$refs.userList.style.top = `${0}px`
                     setTimeout(() => {
                         this.animation()
                     }, 20)
                 }
             },50)
        },
        getDetail (prj_no) {
            let param = {}
            if (prj_no) {
                param = {
                   prj_no 
                }
            }
            getProjectDetail(param).then(r => {
                if (r.code == 0) {
                    this.mock = r.data
                    this.doUser()
                }
            })
        },
        doUser () {
            const {mock: {entry_exit}} = this
            this.userList = entry_exit || []
            clearInterval(this.animationTimer)
            this.animationTimer = null
            if (this.userList.length > 6) {
                this.animation()
            }
        }
    },
    beforeDestroy () {
        clearInterval(this.sysTimer)
        clearInterval(this.animationTimer)
        clearInterval(this.detailTimer)
        clearInterval(this.screentime)
        this.sysTimer = null
        this.animationTimer = null
        this.detailTimer = null
        this.screentime = null
    }
}
</script>
<style lang="less" scoped>
@main-color: #023154;
@font-color: #fff;
.other {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #1b496b;
    .mask {
        .other-box  {
            width: 1920px;
            height: 1080px;
            background: #08253c;
            transform-origin: 0 0;
            transition: all .3s linear;
            .header {
                height: 70px;
                width: 100%;
                padding: 0 20px;
                line-height: 70px;
                background: @main-color;
                color:@font-color;
                font-size: 20px;
                z-index: 100;
                .prj-choice {
                    cursor: pointer;
                }
            }
            .contents {
                padding: 20px;
                width: 100%;
                box-sizing: border-box;
                overflow: scroll;
                display: flex;
                .tis {
                    height: 30px;
                    line-height: 30px;
                    font-size: 22px;
                    color:#fff;
                    font-weight: 600;
                    margin-bottom: 15px;
                    text-align: left;
                    span {
                        margin-right: 10px;
                    }
                }
                .attendance {
                    padding: 10px;
                    background: @main-color;
                    text-align: center;
                    margin-bottom: 15px;
                    border-radius: 4px;
                    height: 400px;
                    color: @font-color;
                    .attendance-total {
                        margin-bottom: 20px;
                        .attendance-item {
                            color: @font-color;
                            margin-right: 10px;
                            font-size: 20px;
                        }
                    }
                }
                .sex {
                    background: @main-color;
                    padding: 10px;
                    border-radius: 4px;
                    height: 480px;
                    .show-types {
                        color: #fff;
                        text-align: center;
                        font-size: 20px;
                        span {
                            margin-left: 10px;
                        }
                    }
                }
                /deep/.ivu-col {
                    &.user {
                        padding-left: 20px;
                    }
                    .work-charts {
                        background: @main-color;
                        overflow: hidden;
                        padding: 10px;
                        border-radius: 4px;
                        height: 400px;
                    }
                    .tables {
                        margin-top: 15px;
                        width: 100%;
                        background: @main-color;
                        overflow: hidden;
                        border-radius: 4px;
                        padding: 10px;
                        height: 480px;
                        .thead {
                            display: flex;
                            height: 60px;
                            line-height: 60px;
                            background: @main-color;
                            position: relative;
                            z-index: 100;
                            span {
                                flex: 1;
                                text-align: center;
                                color: @font-color;
                                font-size: 20px;
                                font-weight: 600;
                            }
                        }
                        .tbody {
                            height: 100%;
                            overflow: hidden;
                            position:relative;
                            .tr {
                                display: flex;
                                .td {
                                    flex: 1;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    height: 60px;
                                    font-size: 20px;
                                    color: @font-color;
                                }
                            }
                        }
                    }
                }
            }
            .footer {
                height: 74px;
                width: 100%;
                z-index: 1000;
                background: @main-color;
                text-align: center;
                line-height: 74px;
                font-size: 20px;
                color: #fff;
            }
        }
    }
}
</style>